<template>
  <!--body产品 -->
  <div class="body">
  <div class="layout">
    <div>
      <h2>手机</h2>
      <h2 class="rigthh2">查看更多</h2>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="5" style="leftloge">
          <img :src="leftloge" />
        </el-col>
        <el-col
          :span="4"
          v-for="(item,index) in phonedata"
          :key="index"
          class="datalist"
          v-bind:class="{ classred:index==current}"
        >
          <a>
            <div class="grid-content" v-on:mouseover="sgadowimg(index)">
              <img :src="item.imgpath" />
              <div>{{item.name}}</div>
              <p>{{item.price}}</p>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
    <!-- 标幅 -->
    <div class="banner">
      <img :src="bannerimgpath" />
    </div>
    <div>
      <h2>家电</h2>
      <h2 class="rigthh2">热门</h2>
      <h2 class="rigthh2">电视影音</h2>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="5" style="leftloge">
          <img :src="leftloge" />
        </el-col>
        <el-col
          :span="4"
          v-for="(item,index) in phonedata"
          :key="index"
          class="datalist"
          v-bind:class="{ classred:index==current}"
        >
          <a>
            <div class="grid-content" v-on:mouseover="sgadowimg(index)">
              <img :src="item.imgpath" />
              <div>{{item.name}}</div>
              <p>{{item.price}}</p>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
    <!-- 标幅 -->
    <div class="banner">
      <img :src="bannerimgpath" />
    </div>
    <div>
      <h2>只能</h2>
      <h2 class="rigthh2">热门</h2>
          <h2 class="rigthh2">安防</h2>
              <h2 class="rigthh2">出行</h2>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="5" style="leftloge">
          <img :src="leftloge" />
        </el-col>
        <el-col
          :span="4"
          v-for="(item,index) in phonedata"
          :key="index"
          class="datalist"
          v-bind:class="{ classred:index==current}"
        >
          <a>
            <div class="grid-content" v-on:mouseover="sgadowimg(index)">
              <img :src="item.imgpath" />
              <div>{{item.name}}</div>
              <p>{{item.price}}</p>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
    <!-- 标幅 -->
    <div class="banner">
      <img :src="bannerimgpath" />
    </div>
    <div>
      <h2>搭配</h2>
      <h2 class="rigthh2">热门</h2>
      <h2 class="rigthh2">耳机音箱</h2>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="5" style="leftloge">
          <img :src="leftloge" />
        </el-col>
        <el-col
          :span="4"
          v-for="(item,index) in phonedata"
          :key="index"
          class="datalist"
          v-bind:class="{ classred:index==current}"
        >
          <a>
            <div class="grid-content" v-on:mouseover="sgadowimg(index)">
              <img :src="item.imgpath" />
              <div>{{item.name}}</div>
              <p>{{item.price}}</p>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
    <!-- 标幅 -->
    <div class="banner">
      <img :src="bannerimgpath" />
    </div>
    <div>
      <h2>配件</h2>
      <h2 class="rigthh2">热门</h2>
      <h2 class="rigthh2">保护套</h2>
      <h2 class="rigthh2">充电器</h2>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="5" style="leftloge">
          <img :src="leftloge" />
        </el-col>
        <el-col
          :span="4"
          v-for="(item,index) in phonedata"
          :key="index"
          class="datalist"
          v-bind:class="{ classred:index==current}"
        >
          <a>
            <div class="grid-content" v-on:mouseover="sgadowimg(index)">
              <img :src="item.imgpath" />
              <div>{{item.name}}</div>
              <p>{{item.price}}</p>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
    <!-- 标幅 -->
    <div class="banner">
      <img :src="bannerimgpath" />
    </div>
    <div>
      <h2>周边</h2>
      <h2 class="rigthh2">热门</h2>
      <h2 class="rigthh2">出行</h2>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="5" style="leftloge">
          <img :src="leftloge" />
        </el-col>
        <el-col
          :span="4"
          v-for="(item,index) in phonedata"
          :key="index"
          class="datalist"
          v-bind:class="{ classred:index==current}"
        >
          <a>
            <div class="grid-content" v-on:mouseover="sgadowimg(index)">
              <img :src="item.imgpath" />
              <div>{{item.name}}</div>
              <p>{{item.price}}</p>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
    <!-- 标幅 -->
    <div class="banner">
      <img :src="bannerimgpath" />
    </div>
      <div>
      <h2>配件</h2>
      <h2 class="rigthh2">热门</h2>
      <h2 class="rigthh2">保护套</h2>
      <h2 class="rigthh2">充电器</h2>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="5" style="leftloge">
          <img :src="leftloge" />
        </el-col>
        <el-col
          :span="4"
          v-for="(item,index) in phonedata"
          :key="index"
          class="datalist"
          v-bind:class="{ classred:index==current}"
        >
          <a>
            <div class="grid-content" v-on:mouseover="sgadowimg(index)">
              <img :src="item.imgpath" />
              <div>{{item.name}}</div>
              <p>{{item.price}}</p>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
    <!-- 标幅 -->
    <div class="banner">
      <img :src="bannerimgpath" />
    </div>
    <div>
      <h2>视频</h2>
      <h2 class="rigthh2">查看全部</h2>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="5" style="leftloge">
          <img :src="leftloge" />
        </el-col>
        <el-col
          :span="4"
          v-for="(item,index) in phonedata"
          :key="index"
          class="datalist"
          v-bind:class="{ classred:index==current}"
        >
          <a>
            <div class="grid-content" v-on:mouseover="sgadowimg(index)">
              <img :src="item.imgpath" />
              <div>{{item.name}}</div>
              <p>{{item.price}}</p>
            </div>
          </a>
        </el-col>
      </el-row>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      dynamicstate: false, //判断是否添加类名
      bannerimgpath: require("@/assets/img/406c0feca62732acbb2893344486895d.webp"), //标幅
      leftloge:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?thumb=1&w=234&h=614&f=webp&q=90",
      phonedata: [
        {
          id: 1,
          name: "小米手机",
          price: "15.66",
          imgpath:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=200&h=200&f=webp&q=90"
        },
        {
          id: 1,
          name: "小米手机",
          price: "15.66",
          imgpath:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=200&h=200&f=webp&q=90"
        },
        {
          id: 1,
          name: "小米手机",
          price: "15.66",
          imgpath:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=200&h=200&f=webp&q=90"
        },
        {
          id: 1,
          name: "小米手机",
          price: "15.66",
          imgpath:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=200&h=200&f=webp&q=90"
        },
        {
          id: 1,
          name: "小米手机",
          price: "15.66",
          imgpath:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=200&h=200&f=webp&q=90"
        },
        {
          id: 1,
          name: "小米手机",
          price: "15.66",
          imgpath:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=200&h=200&f=webp&q=90"
        }
      ]
    };
  },
  methods: {
    sgadowimg(index) {
      //鼠标悬浮出现阴影效果
      this.current = index;
    }
  }
};
</script>

<style scoped>
.classred {
  box-shadow: 0px 0px 10px 10px #abcdef;
  box-shadow: rosybrown;
  position: relative;
  animation: heart 0.5s ease-in-out 0s 1 alternate forwards;
}

@keyframes heart {
  0% {
    top: 0px;
  }
  10% {
    top: -5px;
  }
  50% {
    top: -7px;
  }
  100% {
    top: -10px;
  }
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: white;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 260px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.layout {
  width: 1226px;
}
h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
  display: inline;
}
.leftloge {
  width: 19%;
}
.rigthh2 {
  float: right;
}
.datalist {
    background-color: white
    ;
  margin-bottom: 10px;
  height: 300px;
  width: 220px;
  border: 0px solid red;
  margin-left: 10px;
}
.grid-content {
  text-align: center;
}
.grid-content div,
p,
img {
  text-align: center;
}
.grid-content img {
  width: 160px;
  height: 160px;
}
.leftloge {
  width: 234px;
  height: 614px;
}
.leftloge img {
  width: 100%;
}
a {
  cursor: pointer;
}
.body{
    width: 100%;
}
</style>